<template>
  <div class="goodsList">
    <div class="content">
      <div class="good-list-box">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
          <van-list v-model:loading="loading" :finished="finished" v-model:error="error" error-text="服务器累了，点击重新加载"
            finished-text="  " offset="500" @load="onLoad" :key="2">
            <div class="good-list">
              <div class="good-item" v-for="(value, index) in items" :key="index" :sku="value.F_ProductId" :hei="index">
                <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
                <div class="good-card" @click="
                  $router.push({
                    path: '/product',
                    query: { id: value.F_ProductId, parents_id: username },
                  })
                ">
                  <van-image class="product-img lazy-img" :show-loading="false" lazy-load
                    :src="'http://higuang365.com/' + value.F_pic_url" />
                  <div class="good-desc">
                    <div class="title">{{ value.F_Name }}</div>
                    <!-- <div class="county">
                    <img
                      class="county-icon"
                      v-if="value.F_yuliu2"
                      :src="'http://higuang365.com/' + value.F_yuliu2"
                      alt=""
                    />

                    <div class="county-title">
                      {{ value.F_BrandCountrie }}
                    </div>
                  </div> -->
                    <div class="price-box">
                      <span class="price">¥ <span>{{ value.F_BdPrice }}</span></span>
                      <span class="estimate">￥{{ value.F_Price }}</span>

                      <span class="timelimit">限时</span>
                    </div>

                    <div class="share" @click.stop="
                      addGoodsCart(value.F_yuliu3, value.F_ProductId)
                    "></div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onActivated, onDeactivated } from "vue";
import { GetTagGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
export default defineComponent({
  name: 'peoplebuy',
  setup() {
    const data = reactive({
      items: [],
      error: false,
      loading: false,
      finished: false,
      Refresh: false,
      pageNum: 1,
      pageSize: 100,
      username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      data.loading = true;
      const res = await GetTagGoodsList({
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        tag_id: '19',
        strlv: getCookie("MLV"),
      });
      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      data.items.push(...res[1]);
      data.loading = false;
      data.pageNum += 1;
      if (res[1].length < data.pageSize) {
        data.finished = true;
      }
    };
    const onRefresh = () => {
      data.items = [];
      data.pageNum = 1;
      data.finished = false;
      onLoad();
    };
    let giftBagScroll = 0;
    onActivated(() => {
      if (data.items.length == 0) {
        onLoad();
      }
      document.getElementById("app").scrollTop = giftBagScroll;
    });
    onDeactivated(() => {
      giftBagScroll = document.getElementById("app").scrollTop;
    });
    return { ...toRefs(data), addGoodsCart, onLoad, onRefresh };
  },
});
</script>

<style lang="scss" scoped>
.goodsList {
  padding: 0 0 3rem;

  .good-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: calc(100vw - 2rem);
    margin: auto;
  }

  .good-item {
    box-sizing: border-box;
    width: calc(50vw - 2rem);
    margin: 0.5rem;
    background: rgba(255, 255, 255, .3);
    border-radius: 1rem;
    overflow: hidden;
    animation: jello-horizontal 1s both;
    box-shadow: 1px 1px 2px #c58137;

    .good-card {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .product-img {
      display: block;
      min-width: calc(50vw - 2rem);
      width: calc(50vw - 2rem);
      height: calc(50vw - 2rem);
      border-radius: 1rem;
      overflow: hidden;
    }

    .good-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex-grow: 1;
      text-align: left;
      font-size: 1.2rem;
      padding: 1rem 1rem 0;
      position: relative;

      .county {
        display: flex;

        .county-icon {
          width: 2rem;
          height: 100%;
        }

        .county-title {
          color: #999;
          margin-left: 0.5rem;
        }
      }

      .title {
        font-size: 1.3rem;
        // height: 3.2rem;
        line-height: 2rem;
        letter-spacing: 0.5px;
        margin-top: 2px;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .price-box {
        background: url("http://higuang365.com/public/images/common/promotion/price.webp") no-repeat;
        background-size: contain;
        padding: 0 1rem;
        margin: 1rem 0 0;
      }

      .price {
        font-size: 1.3rem;
        // color: #ff0036;
        color: #fff;
        font-weight: bold;
        line-height: 2.5rem;

        span {
          font-size: 1.7rem;
        }

      }

      .timelimit {
        float: right;
        line-height: 2.6rem;
        color: #050505;
      }

      .share {
        height: 2.5rem;
        width: 2.5rem;
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        z-index: 10;
        background-color: #ff1f10;
        background-image: none;
        mask: url(//storage.360buyimg.com/tower/babelnode/static/media/i-miaosha-red.e6c30bae.png) no-repeat;
        mask-size: 100% 100%;
        display: none;
      }

      .estimate {
        color: #c5c5c5;
        text-decoration: line-through;
        margin-left: 0.5rem;
      }
    }
  }
}
</style>